<template>
  <basic-container>
    <avue-crud v-bind="bindVal"
               v-on="onEvent"
               :page.sync="page"
               v-model="form"
              :search.sync="searchFrom">

      <template slot="menuLeft" slot-scope="scope">
        <el-button type="success" v-if="validatenull(permission.addCodeShow)?false:permission.addCodeShow" icon="el-icon-upload" size="small" @click.stop="isUpload=true">上传</el-button>
        <el-button type="danger" v-if="validatenull(permission.delCodeShow)?false:permission.delCodeShow" icon="el-icon-delete" size="small" @click.stop="deletes()">批量删除</el-button>
      </template>

      <template slot="name" slot-scope="scope">
        <a target="_blank" class="el-link el-link--primary is-underline" :href="download+scope.row.mark">
          <span class="el-link--inner">{{scope.row.name}}</span>
        </a>
      </template>

      <template slot="fileSize" slot-scope="scope">
        <el-tag>{{scope.row.fileSize | bytesToSize}}</el-tag>
      </template>

      <template slot="createTime" slot-scope="scope">
        <el-tag>{{scope.row.createTime}}</el-tag>
      </template>

      <template slot-scope="{disabled,size}" slot="fileTypeSearch">
        <el-input placeholder="请输入文件扩展名" :disabled="disabled" :size="size" v-model="searchFrom.fileType_eq"></el-input>
      </template>

      <template slot="search">
          <el-form-item label="文件大小">
            <el-input placeholder="请输入最小字节" type="number" v-model.number="searchFrom.fileSize_gt" auto-complete="off" />
          </el-form-item>
          ~
          <el-form-item label-width="0">
            <el-input placeholder="请输入最大字节" type="number" v-model.number="searchFrom.fileSize_lt" auto-complete="off" />
          </el-form-item>
      </template>

    </avue-crud>

    <el-dialog custom-class="update-file" class="avue-dialog" append-to-body :show-close="true" :close-on-press-escape="true" title="附件上传" center destroy-on-close :visible.sync="isUpload" :lock-scroll="false" width="412px">
      <el-upload
          drag
          :action="update"
          name="file" with-credentials :before-upload="uploadStar" :on-success="uploadSuccess" :on-error="uploadError">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>
  </basic-container>
</template>

<script>

export default window.$crudCommon({
  data () {
    return {
      searchFrom: {},
      download: window.urllist.download,
      update: window.urllist.update,
      del: true,
      isUpload: false
    }
  },
  created () {
  },
  filters: {
    bytesToSize (bytes) {
      if (bytes === 0) return '0 B';

      const k = 1024,sizes = ['B','KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],

      i = Math.floor(Math.log(bytes) / Math.log(k));

      return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
    }
  },
  methods: {
    delBefore(callback){
      this.$confirm(`删除文件后，所有调用文件处将无法下载，请谨慎操作, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        callback();
      })
    },
    uploadStar(){
      this.$NProgress.start();
    },
    uploadSuccess(response){
      this.$NProgress.done();
      if (response.status){
        this.isUpload = false;
        this.$message.success("上传成功");
        this.refreshChange();
      }else{
        this.$message.error(response.message);
      }
    },
    uploadError(){
      this.$NProgress.done();
      this.$message.error("文件上传失败，稍后重试");
    }
  }
}, {
  name: '/file/list',
  data: 'records'
})
</script>

<style lang="scss" scoped>
.update-file{
  padding:0px;
  text-align: center;
}
</style>